<template>
  <div class="dynamic-bar">
    <div ref="echart" class="echart"/>
  </div>
</template>

<script>
import resize from '@/components/mixins/resize'

export default {
  title: '实时动态折线加柱状图',
  name: 'DynamicBarLine',
  mixins: [resize],
  props: {
    grid: {
      type: Object,
      default: () => {
        return {
          top: 40,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        }
      }
    },
    dataZoom: {
      type: Object,
      default: () => {
        return {
          show: false,
          start: 0,
          end: 100
        }
      }
    },
    xAxis: {
      type: [Object, Array],
      default: () => {
        return [
          {
            type: 'category',
            boundaryGap: true,
            data: [],
            axisLabel: {
              type: 'value',
              color: '#fff',
              fontSize: 16,
              formatter: '{value}'
            },
            axisLine: {lineStyle: {color: '#0694ce'}},
            splitLine: {show: false, lineStyle: {color: '#0694ce'}},
          }
        ]
      }
    },
    yAxis: {
      type: [Object, Array],
      default: () => {
        return [
          {
            type: 'value',
            scale: true,
            name: '',
            splitLine: {
              show: false
            },
            min: 0,
            boundaryGap: [0.2, 0.2],
            axisLabel: {
              type: 'value',
              color: '#fff',
              fontSize: 16,
              formatter: '{value}'
            },
            axisLine: {lineStyle: {color: '#0694ce'}},
            splitLine: {show: false, lineStyle: {color: '#0694ce'}},
          },
          {
            type: 'value',
            scale: true,
            name: '',
            splitLine: {
              show: false
            },
            min: 0,
            boundaryGap: [0.2, 0.2],
            axisLabel: {
              type: 'value',
              color: '#fff',
              fontSize: 16,
              formatter: '{value}'
            },
            axisLine: {lineStyle: {color: '#0694ce'}},
            splitLine: {show: false, lineStyle: {color: '#0694ce'}},
          }
        ]
      }
    },
    series: {
      type: [Object, Array],
      default: () => {
        return [
          {
            name: '',
            type: 'bar',
            barWidth: 5,
            yAxisIndex: 1,
            data: [],
            itemStyle: {
              normal: {
                color: '#0694ce'
              }
            }
          },
          {
            name: '',
            type: 'line',
            data: [],
            itemStyle: {
              normal: {
                color: '#07ceac'
              }
            },
            lineStyle: {
              normal: {
                color: '#07ceac',
                width: 3
              }
            }
          },
          {
            name: '',
            type: 'line',
            data: [],
            itemStyle: {
              normal: {
                color: '#FCFF00'
              }
            },
            lineStyle: {
              normal: {
                color: '#FCFF00',
                width: 3
              }
            }
          },
          {
            name: '',
            type: 'line',
            data: [],
            itemStyle: {
              normal: {
                color: '#E68E1C'
              }
            },
            lineStyle: {
              normal: {
                color: '#E68E1C',
                width: 3
              }
            }
          }
        ]
      }
    },
    datas: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      timer: null
    }
  },
  watch: {
    datas(val) {
      this.chart.setOption({
        xAxis: [{
          data: val.map(item => {
            return item.date.split(' ')[1]
          })
        }],
        series: [
          {
            data: val.map(item => {
              return item.height
            })
          },
          {
            data: val.map(item => {
              return item.airspeed
            })
          },
          {
            data: val.map(item => {
              return item.longitude
            })
          },
          {
            data: val.map(item => {
              return item.latitude
            })
          }
        ]
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$refs.echart)
      this.setOptions({
        legend: {
          show: true,
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {type: 'cross'},
          padding: [5, 10],
          textStyle: {
            fontSize: 14
          }
        },
        grid: this.grid,
        dataZoom: this.dataZoom,
        xAxis: this.xAxis,
        yAxis: this.yAxis,
        series: this.series
      })
      this.chart.setOption({
        xAxis: [{
          data: this.datas.map(item => {
            return item.date.split(' ')[1]
          })
        }],
        series: [
          {

            name: '飞行高度',
            data: this.datas.map(item => {
              return item.height
            })
          },
          {
            name: '飞行速度',
            data: this.datas.map(item => {
              return item.airspeed
            })
          },
          {
            name: '经度',
            data: this.datas.map(item => {
              return item.longitude
            })
          },
          {
            name: '纬度',
            data: this.datas.map(item => {
              return item.latitude
            })
          }
        ]
      })
    },
    setOptions(option) {
      if (!this.chart) {
        return false
      }
      this.chart.setOption(option)
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  }
}
</script>

<style scoped lang="scss">
  .dynamic-bar {
    width: 100%;
    height: 100%;
  }

  .echart {
    width: 100%;
    height: 100%;
  }
</style>